import React, { Component } from "react";
import { Input, Row, Col, Select, Button, notification } from "antd";
import Req from "../../common/Req";
export default class AddInventory extends Component {
  constructor(props) {
    super(props);
    this.state = {
      productTypeid: "未选择",
      productTypes: [],
      products: [
        {
          name: "pro2",
          id: 1,
          specifications: [
            {
              id: 1,
              specificationName: "name_pub",
              stateName: "name_pri",
              values: [
                {
                  id: 1,
                  name: "100kg",
                  value: "100"
                },
                {
                  id: 2,
                  name: "200kg",
                  value: "200"
                }
              ]
            },
            {
              id: 1,
              specificationName: "name_pub1",
              stateName: "name_pri1",
              values: [
                {
                  id: 1,
                  name: "300kg",
                  value: "300"
                },
                {
                  id: 2,
                  name: "400kg",
                  value: "400"
                }
              ]
            }
          ],
          desc: "desc2"
        }
      ],
      count: 0,
      price: 0,

      productid: 1,
      selectSpec: {}
    };
  }

  loadTypes() {
    /**获取所有的商品类型 */
    Req(
      "http://localhost:8080/products/alltypes",
      {},
      this.props.history,
      resp => this.setState({ productTypes: resp.data })
    );
  }

  loadProducts(typeid) {
    /**获取一个类型下所有的商品*/
    Req(
      `http://localhost:8080/products/floor?floorid=${typeid}`,
      {},
      this.props.history,
      resp => this.setState({ products: resp.data })
    );
  }

  componentWillMount() {
    this.loadTypes();
  }

  render() {
    return (
      <div>
        <Row style={{ margin: 15 }}>
          <Col span={3}>选择类型</Col>
          <Col span={8}>
            <Select
              style={{ width: "100%" }}
              value={this.state.productTypeid}
              onChange={e => {
                this.setState({ productTypeid: e });
                //修改规格选项
                this.loadProducts(e);
              }}
            >
              {this.state.productTypes.map((item, index) => (
                <Select.Option key={index} value={item.id}>
                  {item.typeName}
                </Select.Option>
              ))}
            </Select>
          </Col>
        </Row>
        <Row style={{ margin: 15 }}>
          <Col span={3}>选择产品</Col>
          <Col span={8}>
            <Select
              style={{ width: "100%" }}
              value={this.state.productid}
              onChange={e => this.setState({ productid: e })}
            >
              {this.state.products.map((item, index) => (
                <Select.Option key={index} value={item.id}>
                  {item.name}
                </Select.Option>
              ))}
            </Select>
          </Col>
        </Row>
        {this.state.products.map(
          (proItem, proIndex) =>
            proItem.id === this.state.productid
              ? proItem.specifications.map((item, index) => (
                  <Row style={{ margin: 15 }} key={index}>
                    <Col span={3}>{item.specificationName}</Col>
                    <Col span={8}>
                      <Select
                        style={{ width: "100%" }}
                        value={this.state.selectSpec[item.id]}
                        onChange={e => {
                          let selectSpec = this.state.selectSpec;
                          selectSpec[item.id] = e;
                          this.setState({ selectSpec: selectSpec });
                        }}
                      >
                        {item.values.map((valueItem, valueIndex) => (
                          <Select.Option key={valueIndex} value={valueItem.id}>
                            {valueItem.name}
                          </Select.Option>
                        ))}
                      </Select>
                    </Col>
                  </Row>
                ))
              : null
        )}
        <Row style={{ margin: 15 }}>
          <Col span={3}>库存数量</Col>
          <Col span={8}>
            <Input onChange={e => this.setState({ count: e.target.value })} />
          </Col>
        </Row>
        <Row style={{ margin: 15 }}>
          <Col span={3}>价格</Col>
          <Col span={8}>
            <Input onChange={e => this.setState({ price: e.target.value })} />
          </Col>
        </Row>
        <Row style={{ margin: 15 }}>
          <Col span={11}>
            <Button
              onClick={() => {
                console.log(this.state);
                Req(
                  "http://localhost:8080/products/addinventory",
                  {
                    method: "POST",
                    headers: {
                      "Content-type": "application/json"
                    },
                    body: JSON.stringify(this.state)
                  },
                  this.props.history,
                  resp => {
                    if (resp.code === 100 && resp.data.id > 0)
                      notification["success"]({
                        message: "库存添加成功",
                        description: `添加成功，id=${resp.data.id}`
                      });
                    else
                      notification["error"]({
                        message: "库存添加失败",
                        description: "未知原因"
                      });
                  }
                );
              }}
            >
              提交
            </Button>
          </Col>
        </Row>
      </div>
    );
  }
}
